import React from 'react'
import {Col, Row,Icon} from "antd";

import {WeaLocaleProvider,WeaInput} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
import {WeaPortalShare,WeaMaterialLib} from 'weaPortalPublic';

export default class AddExtends extends React.Component{
    render(){
        const {setting,setSetting} = this.props
        const {url='',img} = setting

        return (
            <div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mdcj5w`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@is5jq0`} span={6} >
                            <div className="item-title">{getLabel(22932, '图片链接')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@99tdvs`} span={18}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@zijnqk`} value={url} viewAttr={2} onChange={value => setSetting({url: value})}/>
                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3hnw08`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qjehcw`} span={6} >
                            <div className="item-title">{getLabel(	74, '图片')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3cnr2n`} span={18}>
                            {
                                img ? (
                                    <div className="e9desktop-menu-add-img-edit">
                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@kouyfa`} multiCheck={false} onChange={(value)=>{ setSetting({"img":value})}} type='button' >
                                            <img src={img } alt="" className="e9desktop-menu-add-img-edit-img" title={getLabel(387150, '更换图标')}/>
                                        </WeaMaterialLib>
                                        <div className="e9desktop-menu-add-img-edit-del" title={getLabel(82746, '删除图标')}>
                                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@ajktlp`} type="cross" onClick={() => setSetting({"img": ''})}/>
                                        </div>
                                    </div>
                                ) : (
                                    <div className="e9desktop-menu-add-img-add">
                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@wug75r`} multiCheck={false} onChange={(value)=>{ setSetting({"img":value})}} type='button' >

                                            <div className="e9desktop-menu-add-img-add-icon" title={getLabel(387151, '添加图标')}>
                                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@nt44tq`} type="plus"/>
                                            </div>
                                        </WeaMaterialLib>
                                    </div>
                                )
                            }
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}